<template>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>时间</th>
                    <th>值班内容</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableData" :key="index"
                    :class="{ 'odd-row': index % 2 === 1, 'even-row': index % 2 === 0 }">
                    <td>{{ index + 1 }}</td>
                    <td>
                        <div>{{ item.name }}</div>
                        <div class="subtext">{{ item.phone }}</div>
                    </td>
                    <td>{{ item.time }}</td>
                    <td>{{ item.location }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { reactive } from 'vue';

// 表格数据
const tableData = reactive([
    { name: '张天林', phone: '13712345679', time: '周六 08:00～20:00', location: '1号楼' },
    { name: '张天林', phone: '13712345679', time: '周六 08:00～20:00', location: '2号楼' },
    { name: '张天林', phone: '13712345679', time: '周六 08:00～20:00', location: '3号楼' },
    { name: '张天林', phone: '13712345679', time: '周六 08:00～20:00', location: '4号楼' },
    { name: '张天林', phone: '13712345679', time: '周六 08:00～20:00', location: '5号楼' },
    { name: '张天林', phone: '13712345679', time: '周六 08:00～20:00', location: '6号楼' },
]);
</script>

<style scoped>
.table-container {
    width: 330px;
    height: 190px;
    overflow: hidden;
    /* 防止内容溢出 */
    background-color: #0a1141;
    color: white;
    border-radius: 8px;
}

table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    font-size: 12px;
    /* 调整字体大小 */
}

th,
td {
    padding: 5px;
    /* 调整内边距 */
    text-align: center;
    border-bottom: 1px solid #083171;
}

thead th {
    background-color: #083171;
    color: #ffffff;
    font-weight: normal;
}

tbody tr.odd-row {
    background-color: #0a1141;
}

tbody tr.even-row {
    background-color: #142357;
}

tbody tr td {
    position: relative;
    color: #ffffff;
}

.subtext {
    font-size: 10px;
    /* 更小的字体用于次要信息 */
    color: #b8d0ff;
}
</style>